<template>
  <ul class="side-list-container">
    <li v-for="(item, idx) in list" :key="idx">
      <span @click="handleClick(item)" :class="{ active: item.isSelected }">{{ item.name }}</span>
      <SideList @select="handleClick(item)" :list=" item.children"></SideList>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'SideList',
  // [{name, isSelected, children:[]}]
  props: {
    list: {
      type: Array,
      default: () => [] // 非基本类型用函数写法
    }
  },
  methods: {
    handleClick(item) {
      this.$emit("select", item)
    }
  }
}
</script>

<style scoped lang="less">
@import "~@/styles/var.less";

.side-list-container {
  list-style: none;
  padding: 0;

  .side-list-container {
    margin-left: 1em;
  }

  li {
    min-height: 40px;
    line-height: 40px;
    cursor: pointer;

    .active {
      color: @warn;
      font-weight: bold;
    }
  }
}
</style>